<!--
  模块：服务动态 - 首页
-->
<template>
  <div class="service">
    <AppMainHeader>
      <el-row>
        <el-col :span="22">
          <!-- 查询表单 -->
          <ServiceQueryForm @query="handleQuery" />
        </el-col>
        <el-col :span="2" class="align-right">
          <el-button type="primary" @click="handleAdd">新增动态</el-button>
        </el-col>
      </el-row>
    </AppMainHeader>

    <AppMainContent>
      <!-- 分页表格 -->

      <!-- 分页信息 -->
      <Pagination
        v-show="total > 0"
        :total="total"
        :current.sync="formParams.pageNum"
        :size.sync="formParams.pageSize"
        @pagination="getList"
      />
    </AppMainContent>
  </div>
</template>

<script>
import ServiceQueryForm from './components/service-query-form'
// 服务的表格组件

import { pageService } from '@/api/service/index'

let pageParams = { pageNum: 1, pageSize: 10 }

export default {
  name: 'Service',
  components: { ServiceQueryForm },
  data() {
    return {
      // 表单查询参数
      formParams: { ...pageParams },
      // 总的数据条数
      total: 44,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // * 获取表格数据
    getList() {
      pageService(this.formParams).then((response) => {
        console.log(response)
      })
    },
    handleAdd() {
      // ...
      this.$router.push('/service/add')
    },
    handleQuery(formParams) {
      this.formParams = { ...formParams, ...pageParams }

      this.getList()
    },
  },
}
</script>

<style scoped></style>
